<template>
    <div id="box">
        <div class="search">
            <input type="text" class="searchBox" v-model="searchVal">
            <p>{{$store.getters.getCarlist}}</p>
            <button class="btn">搜 索</button>
        </div>
        <table class="goodsheet">
            <tr>
                <th>商品名</th>
                <th>单价
                    <span @click="orderFn('price', false)">↑</span>
                    <span @click="orderFn('price', true)">↓</span>
                </th>
                <th>销量
                    <span @click="orderFn('sales', false)">↑</span>
                    <span @click="orderFn('sales', true)">↓</span>
                </th>
            </tr>
            <tr v-for='item in list'>
                <td>{{item.title}}</td>
                <td>{{item.price}}</td>
                <td>{{item.sales}}万</td>
            </tr>
        </table>
    </div>
</template>

<script>

    export default {
        //name: 'search',
        data() {
            return {
                goodsList: [
                    {namem: "三星Galaxy Note8", price: "yreyh", sales: 2.6},
                    {namem: "iphone5s", price: "yreyh", sales: 2.2},
                    {namem: "iphone6", price: "yreyh", sales: 1.6},
                    {namem: "iphone6s", price: "yreyh", sales: 2.9},
                    {namem: "iphone7", price: "yreyh", sales: 12.6},
                    {namem: "iphone7plus", price: "yreyh", sales: 2.1},
                    {namem: "iphone8", price: "yreyh", sales: 10.6},
                    {namem: "华为", price: "yreyh", sales: 7.6},
                    {namem: "小米", price: "tgdh", sales: 32.6},
                    {namem: "OPPOR11", price: "yreyh", sales: 1.2},
                    {namem: "vivoX20", price: "yreyh", sales: 2.9}
                ],
                searchVal: '',
                letter: '',
                original: false,
            }
        },

        methods: {
            orderFn(letter,original){
                this.letter = letter;
                this.original = original; }
        },
        computed:{
            list: function(){
                var _this = this;
                var arrByZM = [];
                //for (var i=0;i<this.$store.state.car.length;i++)
                this.$store.getters.getCarlist.forEach(item=>{
                    if(item.title.search(this.searchVal) != -1)
                   {  arrByZM.push(item);}
                })

                if(this.letter != ''){
                    arrByZM.sort(function( a , b)
                    { if(_this.original)
                    {
                        return b[_this.letter] - a[_this.letter];
                    }
                    else{
                        return a[_this.letter] - b[_this.letter];
                    }
                    });
                }
                return arrByZM;
            }
        }
    };

</script>

<style scoped>

</style>